﻿<template>
	<div id="user">
		<div class="top_con">
			<div class="top">
				<div class="le">
					<img :src="list_user.headImg" width="100%" height="100%">
				</div>
				<div class="conter">
					<h5>{{ list_user.nickName }}</h5>
					<p @click="$router.push('/users/setting')">{{list_user.loginPhone}} <span
							class="iconfont icon-bianji"></span>
					</p>
				</div>
				<div class="ri">
					<span class="iconfont icon-shezhixitongshezhigongnengshezhishuxing-xian"
						@click="$router.push('/users/setting')"></span>
					<span class="iconfont icon-xiaoxi"></span>
				</div>
			</div>
			<ul>
				<li>
					<h6>{{ list_user.price }}</h6>
					<p>我的收藏</p>
				</li>
				<li>
					<h6>{{ list_user.follow  }}</h6>
					<p>关注店铺</p>
				</li>
				<li>
					<h6>{{ list_user.polarBean  }}</h6>
					<p>浏览记录</p>
				</li>
				<li>
					<h6>{{ list_user.fans  }}</h6>
					<p>优惠卷</p>
				</li>
			</ul>
		</div>
		<div class="content">
			<div class="top">
				<div class="t_h">
					<div class="t_h_le">我的订单 </div>
					<div class="t_h_ri">全部订单<span class="iconfont icon-xiangyoujiantou"></span></div>
				</div>
				<ul>
					<li>
						<img src="../../assets/order1_default.png" alt="">
						<p>待付款</p>
					</li>
					<li>
						<img src="../../assets/order2_default.png" alt="">
						<p>待发货</p>
					</li>
					<li>
						<img src="../../assets/order3_default.png" alt="">
						<p>待付款</p>
					</li>
					<li>
						<img src="../../assets/order4_default.png" alt="">
						<p>待评价</p>
					</li>
					<li>
						<img src="../../assets/order5_default.png" alt="">
						<p>售后、退款</p>
					</li>
				</ul>
			</div>
			<div class="conter">
				<swipe :banner="banner"></swipe>
			</div>
			<div class="bottom">
				<ul>
					<li v-for="(item,index) in list" :key="index">
						<img :src="item.pic" alt="">
						<p>{{ item.name }}</p>
					</li>
				</ul>
			</div>
		</div>

		<div class="copy-right">
			鲁ICP备2020043276号
		</div>
	</div>
</template>

<script>
	// <!-- 导入api文件 -->
	import {
		// 获取用户信息
		getUserInfo
	} from "@/api/user"
	import swipe from '@/components/home/swipe.vue'
	import {
		getUser
	} from "@/api/user"
	export default {
		components: {
			swipe
		},
		data() {
			return {
				// 我的页面部分数据
				list: [],
				// 轮播图数据
				banner: [],
				// 用户信息
				list_user: {
					headImg: '',
					nickName: '',
					desction: '',
					price: '-',
					polarBean: '-',
					fans: '-',
					follow: '-',
					loginPhone: '',
				},
			}
		},
		created() {
			getUser().then(res => {
					this.banner = res.data.data.banner
					this.list = res.data.data.menu
					console.log("我的", res.data.data)
				}),
				this.GetUserInfo()
		},
		methods: {
			GetUserInfo() {
				var token = localStorage.getItem("token")
				getUserInfo({
						"token": token
					}).then(res => {
						this.list_user = res.data.result
						// 判断code 1 成功
						if (res.data.code == 1) {
							// 先更新本地token
							localStorage.setItem('token', res.data.result.token);
							// 更新data里面的 用户信息数据
							this.list_user = res.data.result;
							console.log("用户信息：", this.list_user)
							// 更新本地存储 localStorage的用户信息
							localStorage.setItem('userInfo', JSON.stringify(this.list_user))
						}
					})
					.catch(err => {
						console.error(err)
					})
			}
		},
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#user {
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;

		.top_con {
			width: 100%;
			height: 174 * $width;
			background-color: #e93323;
			padding: 14 * $width;
			color: #fff;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 60 * $width;
				width: 100%;

				.le {
					width: 60 * $width;
					height: 60 * $width;
					border-radius: 50%;
					overflow: hidden;
				}

				.conter {
					width: 200 * $width;

					h5 {
						font-size: 16 * $width;
						font-weight: 400;
					}

					p {
						color: #f39897;

						span {
							margin-left: 5 * $width;
						}
					}
				}

				.ri {
					height: 100%;
					display: flex;

					span {
						margin-left: 15 * $width;
						font-size: 20 * $width;
					}
				}
			}

			ul {
				margin-top: 20 * $width;
				display: flex;
				justify-content: space-around;

				li {
					text-align: center;

					h6 {
						font-size: 20 * $width;
					}

					p {
						font-size: 12 * $width;
						color: #f6ada7;
					}
				}
			}
		}

		.content {
			position: relative;
			top: -25 * $width;
			z-index: 9;
			width: 100vw;

			.top {
				width: 95vw;
				height: 120 * $width;
				margin: 0 2.5%;
				background-color: #fff;
				border-radius: 10 * $width;

				.t_h {
					display: flex;
					justify-content: space-between;
					height: 40 * $width;
					line-height: 40 * $width;
					padding: 0 10 * $width;
					border-bottom: 1px dashed #ccc;

					.icon-xiangyoujiantou {
						font-size: 12 * $width;
					}
				}

				ul {
					display: flex;
					justify-content: space-around;
					padding: 12 * $width 0;

					li {
						display: flex;
						flex-direction: column;
						align-items: center;

						p {
							margin-top: 5 * $width;
						}
					}
				}
			}

			.conter {
				width: 95%;
				margin: 10 * $width 2.5%;
			}

			.bottom {
				width: 95vw;
				background-color: #fff;
				border-radius: 10 * $width;
				padding: 10 * $width 0;
				margin: 0 2.5%;

				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;

					li {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 88 * $width;
						height: 45 * $width;
						margin: 8 * $width 0;

						img {
							width: 26 * $width;
							height: 26 * $width;
						}
					}
				}
			}
		}

		.copy-right {
			margin: 10 * $width;
			text-align: center;
		}
	}
</style>
